<template>
  <div class="notice-panel">
    <!-- 平台公告 -->
    <div class="notice-section">
      <div class="notice-header">
        <div class="title">
          <div class="icon-wrapper">
            <i class="fas fa-bullhorn"></i>
            <div class="icon-glow"></div>
          </div>
          <span>平台公告</span>
        </div>
        <NuxtLink to="/notices" class="more">
          <span>更多</span>
          <i class="fas fa-chevron-right"></i>
        </NuxtLink>
      </div>
      <div class="notice-content">
        <div class="notice-list" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
          <div 
            v-for="notice in notices" 
            :key="notice.id"
            class="notice-item"
            @click="viewNotice(notice.id)"
          >
            <div class="notice-content-wrapper">
              <div class="notice-badge">
                <i class="fas fa-circle"></i>
              </div>
              <div class="notice-text">
                <span class="notice-title">{{ notice.title }}</span>
                <span class="notice-date">{{ notice.date }}</span>
              </div>
            </div>
            <div class="notice-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户登录区 -->
    <div class="user-section">
      <div class="welcome-text">
        Hi~欢迎来到食用菌线上交易平台！
      </div>
      
      <div class="auth-buttons">
        <NuxtLink to="/login" class="btn-login">登录</NuxtLink>
        <NuxtLink to="/register" class="btn-register">注册</NuxtLink>
      </div>
      
      <div class="user-tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-item"
          :class="{ active: activeTab === tab.id }"
          @click="activeTab = tab.id"
        >
          {{ tab.name }}
        </div>
      </div>
      
      <div class="function-grid">
        <NuxtLink 
          v-for="func in currentFunctions" 
          :key="func.id"
          :to="func.link"
          class="function-item"
        >
          <i :class="func.icon"></i>
          <span>{{ func.name }}</span>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const notices = [
  { id: 1, title: '关于平台春节期间物流配送安排的...', date: '10-15' },
  { id: 2, title: '2024年度优质供应商评选活动开始啦', date: '10-14' },
  { id: 3, title: '平台新增食用菌品类质量标准公示', date: '10-13' },
  { id: 4, title: '关于加强食品安全管理的重要通知', date: '10-12' },
  { id: 5, title: '平台物流配送范围扩展公告', date: '10-11' },
]

const tabs = [
  { id: 'buyer', name: '我是买家' },
  { id: 'seller', name: '我是卖家' },
  { id: 'more', name: '更多功能' },
]

const activeTab = ref('buyer')

const buyerFunctions = [
  { id: 1, name: '采购订单', icon: 'fas fa-clipboard-list', link: '/buyer/orders' },
  { id: 2, name: '申请发货', icon: 'fas fa-box', link: '/buyer/shipping' },
  { id: 3, name: '资金管理', icon: 'fas fa-wallet', link: '/buyer/finance' },
  { id: 4, name: '在线签章', icon: 'fas fa-file-signature', link: '/buyer/sign' },
  { id: 5, name: '售后服务', icon: 'fas fa-headset', link: '/buyer/service' },
  { id: 6, name: '评价订单', icon: 'fas fa-star', link: '/buyer/rating' },
]

const sellerFunctions = [
  { id: 1, name: '发布商品', icon: 'fas fa-plus-circle', link: '/seller/publish' },
  { id: 2, name: '订单管理', icon: 'fas fa-list-alt', link: '/seller/orders' },
  { id: 3, name: '库存管理', icon: 'fas fa-warehouse', link: '/seller/inventory' },
  { id: 4, name: '店铺管理', icon: 'fas fa-store', link: '/seller/shop' },
  { id: 5, name: '财务报表', icon: 'fas fa-chart-line', link: '/seller/finance' },
  { id: 6, name: '客服中心', icon: 'fas fa-comments', link: '/seller/service' },
]

const moreFunctions = [
  { id: 1, name: '物流查询', icon: 'fas fa-truck', link: '/logistics' },
  { id: 2, name: '质检报告', icon: 'fas fa-certificate', link: '/quality' },
  { id: 3, name: '行业资讯', icon: 'fas fa-newspaper', link: '/news' },
  { id: 4, name: '价格行情', icon: 'fas fa-chart-bar', link: '/price' },
  { id: 5, name: '帮助中心', icon: 'fas fa-question-circle', link: '/help' },
  { id: 6, name: '联系我们', icon: 'fas fa-phone-alt', link: '/contact' },
]

const currentFunctions = computed(() => {
  switch (activeTab.value) {
    case 'buyer':
      return buyerFunctions
    case 'seller':
      return sellerFunctions
    default:
      return moreFunctions
  }
})

const viewNotice = (id) => {
  navigateTo(`/notices/${id}`)
}

const pauseScroll = () => {
  // 暂停滚动动画
}

const resumeScroll = () => {
  // 恢复滚动动画
}
</script>

<style lang="scss" scoped>
.notice-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 501px;
  
    .notice-section {
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 195px;
    margin-bottom: 15px;
    
    .notice-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
      
      .title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #e4393c;
        
        .icon-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          background: linear-gradient(135deg, #e4393c, #ff6b6b);
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(228, 57, 60, 0.3);
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(228, 57, 60, 0.4);
          }
          
          i {
            font-size: 16px;
            color: #fff;
            z-index: 2;
            position: relative;
          }
          
          .icon-glow {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, #e4393c, #ff6b6b);
            border-radius: 10px;
            opacity: 0.3;
            z-index: 1;
            animation: pulse 2s infinite;
          }
        }
      }
      
      .more {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #999;
        font-size: 12px;
        text-decoration: none;
        transition: all 0.3s ease;
        padding: 6px 12px;
        border-radius: 16px;
        background: rgba(228, 57, 60, 0.05);
        
        &:hover {
          color: #e4393c;
          background: rgba(228, 57, 60, 0.1);
          transform: translateX(2px);
        }
        
        i {
          font-size: 10px;
          transition: transform 0.3s ease;
        }
        
        &:hover i {
          transform: translateX(2px);
        }
      }
    }
    
    .notice-content {
      height: 110px;
      overflow: hidden;
      position: relative;
      
      .notice-list {
        animation: noticeScroll 20s linear infinite;
        
        &:hover {
          animation-play-state: paused;
        }
        
        .notice-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 0;
          margin: 2px 0;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;
          position: relative;
          
          &:hover {
            background: rgba(228, 57, 60, 0.05);
            transform: translateX(4px);
            
            .notice-arrow {
              opacity: 1;
              transform: translateX(0);
            }
            
            .notice-badge i {
              color: #e4393c;
              transform: scale(1.2);
            }
            
            .notice-title {
              color: #e4393c;
            }
          }
          
          .notice-content-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            overflow: hidden;
            
            .notice-badge {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 8px;
              height: 8px;
              flex-shrink: 0;
              
              i {
                font-size: 6px;
                color: #e4393c;
                transition: all 0.3s ease;
              }
            }
            
            .notice-text {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 8px;
              flex: 1;
              overflow: hidden;
              
              .notice-title {
                font-size: 13px;
                color: #333;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: color 0.3s ease;
                line-height: 1.2;
                flex: 1;
              }
              
              .notice-date {
                font-size: 12px;
                color: #999;
                font-weight: 400;
                flex-shrink: 0;
                white-space: nowrap;
              }
            }
          }
          
          .notice-arrow {
            opacity: 0;
            transform: translateX(-4px);
            transition: all 0.3s ease;
            color: #e4393c;
            
            i {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  
  .user-section {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    
    .welcome-text {
      font-size: 14px;
      color: #333;
      margin-bottom: 12px;
    }
    
    .auth-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
      
      .btn-login,
      .btn-register {
        flex: 1;
        padding: 8px 0;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.3s;
      }
      
      .btn-login {
        background: #e4393c;
        color: #fff;
        
        &:hover {
          background: darken(#e4393c, 10%);
        }
      }
      
      .btn-register {
        background: #fff;
        color: #e4393c;
        border: 1px solid #e4393c;
        
        &:hover {
          background: #fef5f5;
        }
      }
    }
    
    .user-tabs {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      margin-bottom: 12px;
      
      .tab-item {
        flex: 1;
        padding: 8px 0;
        text-align: center;
        font-size: 13px;
        color: #666;
        cursor: pointer;
        position: relative;
        transition: all 0.3s;
        
        &:hover {
          color: #e4393c;
        }
        
        &.active {
          color: #e4393c;
          font-weight: 600;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e4393c;
          }
        }
      }
    }
    
    .function-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      
      .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
        text-decoration: none;
        color: #666;
        border-radius: 4px;
        transition: all 0.3s;
        
        &:hover {
          background: #fef5f5;
          color: #e4393c;
        }
        
        i {
          font-size: 22px;
          margin-bottom: 6px;
        }
        
        span {
          font-size: 12px;
        }
      }
    }
  }
}

@keyframes noticeScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}
</style>
